<template>
  <div>
    <!-- 头部 -->
    <mt-header fixed title="我的商城"></mt-header>
    <div v-if="isshow" id="back">
      <a href="javascript:void(0)" @click="backto">返回</a>
    </div>
    <!-- 路由站位 -->

    <router-view></router-view>
    <!-- 底部导航 -->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item " to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/tabbar-with-chat">
        <span class="mui-icon mui-icon-email">
        
        </span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar/car">
        <span class="mui-icon mui-icon-contact">
          <span id="badge" class="mui-badge">0</span>
        </span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item" to="/tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>

  </div>
</template>

<script>
import {vm,COUNTSTR} from "./common/vm.js";
vm.$on(COUNTSTR,function(count){
  var badgeobj=document.querySelector("#badge");
  badgeobj.innerText=parseInt(badgeobj.innerText)+count;
})
  export default {
    data(){
      return {
        isshow:false
      }
    },
    watch:{
      $route:function(newroute,oldroute){
        if(newroute.path.toLowerCase()=='/home'){
          this.isshow=false
        }else{
          this.isshow=true;
        }
      }
    },
    methods:{
      backto(){
        this.$router.go(-1);
      }
    },
    mounted(){
    
          var jsonStr = localStorage.getItem('goodsdata');
          jsonStr = jsonStr || '[]';
          var arr = JSON.parse(jsonStr);

          var num = 0;
          for(var i = 0; i < arr.length; i++){
              num += parseInt(arr[i].count);
          }

          var badgeObj = document.getElementById('badge');
          badgeObj.innerText = parseInt(badgeObj.innerText) + num;
      },

  }
</script>
<style scoped>
  .mint-header {
    height:45px;
  }
  #back{
    width:60px;
    position:fixed;
    top: 14px;
    left:10px;
    z-index:100;
  }
  #back a {
    color:white;
    font-size: 16px;
    font-weight: bold;
  }
</style>